import { useState, useEffect } from "react"
import axios from "axios"
import './cart.css'
export default function Cart() {
    let [data, setData] = useState([])
    let [val, setVal] = useState('')
    let token = window.localStorage.getItem('token')
    useEffect(() => {
        axios.get('https://apipc-xiaotuxian-front.itheima.net/member/cart', {
            headers: {
                Authorization: 'Bearer ' + token
            }
        }).then(res => {
            if (res.data.msg == '操作成功') {
                console.log(res.data.result);
                data = res.data.result
                setData([...data])
            }
        })
        
    }, [token])
   function change(e){
    val=e.target.value
    setVal(val)
    }
    return <div>
        <div className="cart">
            <table>
                <thead>
                    <tr>
                        <th width="120">
                            <div className="xtx-checkbox box">
                                <input type="checkbox" />
                                <span>全选</span>
                            </div>
                        </th>
                        <th width="400">商品信息</th>
                        <th width="220">单价</th>
                        <th width="180">数量</th>
                        <th width="180">小计</th>
                        <th width="140">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        data.length==0 && <tr>
                            <td className="cart_none">
                                <div className="cart-none">
                                    <img src=""
                                        alt="" />
                                    <p>购物车内暂时没有商品</p>
                                    <div className="btn"><button className="xtx-button ellipsis middle primary">继续逛逛</button></div>
                                </div>
                            </td>
                        </tr>
                    }

                    {
                        data.map((i, ind) => {
                            return <tr key={ind}>
                                <td>
                                    <div className="xtx-checkbox box">
                                        <input type="checkbox" />
                                    </div>
                                </td>
                                <td>
                                    <div className="goods">
                                        <a href="#!" className="">
                                            <img src={i.picture} alt="" />
                                        </a>
                                        <div>
                                            <p className="name ellipsis">{i.name}</p>
                                            <div className="cart-sku">
                                                <div className="attrs">
                                                    <span className="ellipsis">{i.attrsText}</span>
                                                    <i className="iconfont icon-angle-down"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td className="tc">
                                    <p>{i.price}</p>
                                </td>
                                <td className="tc">
                                    <div className="xtx-numbox">
                                        <div className="numbox">
                                            <button >-</button>
                                            <input type="text" onChange={change} value={i.count} />
                                            <button>+</button>
                                        </div>
                                    </div>
                                </td>
                                <td className="tc">
                                    <p className="f16 red">¥{i.price*i.count}</p>
                                </td>
                                <td className="tc">
                                    <p><a href="#!">移入收藏夹</a></p>
                                    <p><a className="green" href="#!" >删除</a></p>
                                    <p><a href="#!">找相似</a></p>
                                </td>
                            </tr>
                        })
                    }

                </tbody>
            </table>
        </div>
        <div className="action">
            <div className="batch">
                <div className="xtx-checkbox box">
                    <input type="checkbox" />
                    <span>全选</span>
                </div>
                <a href="#!">删除商品</a>
                <a href="#!">移入收藏夹</a>
                <a href="#!">清空失效商品</a>
            </div>
            <div className="total"> 共  件商品，已选择  件，商品合计： <span className="red">¥</span><button className="xtx-button ellipsis middle primary">下单结算</button>
            </div>
        </div>
    </div >
}